<template>
  <div class="home clearfix">
    <Header/>
    <div class="carousel" @mouseenter="enter" @mouseleave="leave">
      <transition-group
        tag="ul"
        name="image"
        enter-active-class="animated lightSpeedIn"
        leave-active-class="animated lightSpeedOut"
      >
        <li
          v-for="(image,index) in imgList"
          :key="index"
          v-show="index === mark"
        >
          <a href="javascript:">
            <img :src="image.src">
          </a>
        </li>
      </transition-group>
      <div class="bullet">
        <span
          v-for="(item,index) in imgList.length"
          :class="{'active':index === mark}"
          @click="change(index)"
          :key="index"
        ></span>
      </div>
      <div class="switch con-width-1200 clearfix pos-abs">
        <span class="prev" @click="prev">&lt;</span>
        <span class="next" @click="next">&gt;</span>
      </div>
    </div>

    <div class="con-width-1200">
      <div class="pub-tit">
        <h1>关于我们</h1>
        <h2>ABOUT US</h2>
      </div>
      <div class="clearfix block1">
        <div class="fxl img">
          <img class="img" src="../assets/images/img01.png">
          <!-- <video
            muted
            src="http://media.avicyt.com/0420_1.mp4"
            width="700"
          >您的浏览器不支持 video 标签。</video> -->
        </div>
        <div class="fxr con">
          <h2>JING YOGA</h2>
          <p>
            禾泽果业，成立于2016年，是一家秉承专业于形，专注于心，以重塑精致自我为主张的大型专业瑜伽馆。
京瑜伽的品牌名称取自于创始人赵京的“京”字，代表着“京益求精”的专业精神，以及用专业力量为更多人重塑“京”
致自我的美好愿景。创始人赵京，18岁开始习练瑜伽，精修瑜伽知识，获得了多项专业认证，在长达七年的教学经验中洞
察与思考，当见证了太多人因为瑜伽而惊艳蜕变时，赵京与团队决定用专业帮助更多人走进瑜伽的世界，开启全新的自我
。
          </p>
        </div>
      </div>
      <div class="clear hei20"></div>
      <div class="pub-tit">
        <h1>精品推荐</h1>
        <h2>RECOMMENDED</h2>
      </div>
      <div class="block-list clearfix">
        <ul class="clearfix" name="liall4">
          <li class="clearfix">
            <a class="clearfix" v-on:click="li_click(1000)">
              <img src="../assets/images/img02.png">
              <p>禾泽产品</p>
            </a>
          </li>
          <li class="clearfix">
            <a class="clearfix" v-on:click="li_click(1001)">
              <img src="../assets/images/img03.png">
              <p>京瑜伽场馆</p>
            </a>
          </li>
          <li class="clearfix">
            <a class="clearfix" v-on:click="li_click(1002)">
              <img src="../assets/images/img04.png">
              <p>最新活动</p>
            </a>
          </li>
          <li class="clearfix pad-no">
            <a class="clearfix" v-on:click="li_click(1003)">
              <img src="../assets/images/img05.png">
              <p>瑜你有约</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="clear hei20"></div>
      <div class="pub-tit">
        <h1>申请体验</h1>
        <h2>APPLICATION EXPERIENCE</h2>
      </div>
      <div class="applay clearfix">
        <img class="fxl img" src="../assets/images/img06.png">
        <div class="fxl from clearfix">
          <h1>欢迎留言</h1>
          <input class="rad5 inp" placeholder="您的姓名：" v-model="name">
          <input class="rad5 inp" placeholder="您的手机：" v-model="mobile">
          <textarea class="rad5 inp" placeholder="您的留言：" v-model="content"></textarea>

          <div class="clear"></div>
          <!-- <div class="fxl sure">
            <input type="checkbox" class="fxl radio">
            <div class="fxl">
              <span class="font">同意</span>“京瑜伽申请体验相关条款内容“
            </div>
          </div>-->
          <div class="clear"></div>
          <button class="btn rad5" @click="submit()" :disabled="isDisable">提交保存</button>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <Footer/>
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from "./Footer.vue";
import _http from "../httpService";

export default {
  name: "About",
  props: {
    msg: String
  },
  components: {
    Header,
    Footer
  },
  data() {
    return {
      mark: 0,
      imgList: [],
      isDisable: false,
      name: "",
      mobile: "",
      content: ""
    };
  },
  methods: {
    submit() {
      console.log(this.name);
      console.log(this.mobile);
      console.log(this.content);

      if (!/[\u4e00-\u9fa5]/.test(this.name)) {
        alert("姓名只能输入中文");
        return;
      }

      if (!/0?(13|14|15|17|18|19)[0-9]{9}/.test(this.mobile)) {
        alert("无效的手机号");
        return;
      }

      if (this.content.length < 5) {
        alert("留言最少要收入5个字符");
        return;
      }

      _http
        .post("/leave/save", {
          enterpriseId: 1,
          name: this.name,
          mobile: this.mobile,
          content: this.content
        })
        .then(response => {
          console.log(response);
          if (response.data > 0) {
            this.name = "";
            this.mobile = "";
            this.content = "";
            alert("提交成功，稍后客服会与您联系");
          }
        })
        .catch(error => console.log(error))
        .finally(() => (this.loading = false));
    },

    li_click: function(id) {
      console.log(id);
      this.$router.push({ path: "/detail/" + id });
    },
    //添加方法
    change(i) {
      this.mark = i;
    },
    prev() {
      this.mark--;
      if (this.mark === -1) {
        this.mark = 3;
      }
    },
    next() {
      this.mark++;
      if (this.mark === this.imgList.length) {
        this.mark = 0;
      }
    },
    autoPlay() {
      this.mark++;
      if (this.mark === 4) {
        this.mark = 0;
      }
    },
    play() {
      this.time = setInterval(this.autoPlay, 3000);
    },
    enter() {
      console.log("enter");
      clearInterval(this.time);
    },
    leave() {
      console.log("leave");
      this.play();
    }
  },
  created() {
    _http
      .get(
        "/content/selectListByEnterpriseIdAndCatalogCode?catalogCode=carouselMap"
      )
      .then(response => {
        console.log(response);
        this.imgList = [];
        response.data.forEach(element => {
          this.imgList.push({ id: element.id, src: element.previewImage });
        });
      })
      .catch(error => console.log(error))
      .finally(() => (this.loading = false));

    this.play();
  }
};
</script>

<style>
.pub-tit {
  padding: 40px 0px;
  color: #442314;
}

.pub-tit > h1 {
  dispaly: block;
  font-size: 22px;
  font-weight: normal;
}

.pub-tit > h2 {
  dispaly: block;
  font-size: 14px;
  font-weight: normal;
}

.block1 > .img {
  width: 700px;
}

.block1 > .img img {
  width: 100%;
}

.block1 > .con {
  width: 440px;
  color: #442314;
  padding-top: 50px;
}

.block1 > .con > h2 {
  color: #ad5434;
  font-size: 30px;
  font-weight: bold;
  text-align: left;
  padding-bottom: 20px;
}

.block1 > .con > p {
  text-align: left;
  line-height: 30px;
}
.block-list ul li {
  float: left;
  margin-right: 30px;
}
.block-list ul li a {
  display: block;
  border: 1px solid #eae7e5;
  color: #442314;
  background: #fff;
}
.block-list ul li a img {
  width: 275px;
  height: 275px;
}
.block-list ul li a p {
  line-height: 40px;
}
.pad-no {
  margin: 0px !important;
}
.block-list ul li a:hover {
  -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}
.block-list ul li a:hover p {
  color: #ad5434;
}
.applay {
  background: #f2f2f4;
  text-align: left;
}
.applay > .img {
  width: 600px;
}
.applay .from {
  padding: 30px;
  color: #ad5434;
  width: 500px;
}
.applay .from h1 {
  font-size: 18px;
  padding-bottom: 20px;
}
.applay .from .inp {
  float: left;
  border: 1px solid #ad5434;
  width: 300px;
  padding: 8px;
  margin-bottom: 12px;
  background: transparent;
  color: #84665c;
}
.applay .btn {
  background: #ba5b38;
  color: #fff;
  padding: 6px 30px;
  font-size: 14px;
  font-weight: bold;
}
.applay .font {
  color: #84665c;
}
.applay .sure {
  padding: 10px 0px;
}
.applay .radio {
  display: inline-block;
  margin: 4px 10px 0px 0px;
}
.carousel {
  margin-top: -10px;
}
</style>
